<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>站点模版</title>
<link type="text/css" rel="stylesheet" href="static/css/style.css" />
<link type="text/css" rel="stylesheet" href="static/js/art/artDialog.css" />
<script type="text/javascript" src="static/js/jquery.js"></script>
<script type="text/javascript" src="static/js/public.js"></script>
<script type="text/javascript" src="static/js/art/artDialog.js"></script>
</head>

<body>
<div id="header">
	<div class="main clearfix">
		<h1 id="logo"><img src="static/images/logo.png" /></h1>
		<div class="search">
			<p class="searchmi fl">
				<input class="search_t" type="search"  placeholder="搜索频道">
			</p>
			<input class="search_b fl" type="button" value=" ">
		</div>
		<div class="home">
			<div class="uHome"><a href="#">个人主页</a></div>
			<s></s>
			<div id="uinfoShow" class="uInfo">
				<div class="uhead"><a href="#"><img src="static/images/uheader.png"/></a></div>
				<div class="uname"><a href="#">用户名</a></div>
				<div class="newmsg"><a href="#" title="有2条新消息">2</a></div>
				<b></b>
				<ul class="info_show">
					<li class="letter b_t"><a href="#">私信</a>
						<div class="newmsg"><a href="#" title="有2条新消息">2</a></div>
					</li>
					<li class="set"><a href="#">设置</a></li>
					<li class="exit"><a href="#">退出</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>
<div class="main">
	<div class="crumbs-i f_14"> <a class="c_2" href="#">用户中心</a> <i>&gt;</i> <span class="cur">帐号设置</span></div>
	<div class="content_i">
		<ul id="pCntTabListId"  class="pCntTabList">
			<li><a class="pTabItem" href="setting.htm">帐号设置</a></li>
			<li><a class="pTabItem" href="notice.htm">站点公告</a></li>
			<li class="current"><a class="pTabItem" href="#">站点模版</a></li>
			<li><a class="pTabItem" href="#">频道管理</a></li>
			<li><a class="pTabItem" href="#">站内信</a><span class="newmsg" title="有2条新消息">2</span></li>
			<li><a class="pTabItem" href="#">支付卡管理</a></li>
		</ul>
		<div id="pContnetWrap">
			<div class="pContnet template">
				<div class="temLeft">
					<dl class="pcntdl_a">
						<dt>站点吊顶：</dt>
						<dd style="width:380px;">
							<p style="width:380px;"><input class="uploadLogo fl" name="浏览" id="upload_img" type="file" onchange="onUploadImgChange(this)"></p><p class="f_12 fl">(建议上传宽度940的图片，其他尺寸图片会拉伸或收缩。 支持格式：Jpeg, Gif, Png)</p>
						</dd>
					</dl>
					<div>
					<p class="iCancelBtn">
						<input class="Btn_a" type="reset" value="取 消">
					</p>
					<p class="iSaveBtn fl">
						<input class="Btn_a" type="submit" value="保 存">
					</p>
					</div>
				</div>
				<div class="temRight">
					<div class="banner_preview">
						<div class="banner_preview-none">吊顶预览</div>
						<div id="preview_wrapper">
							<div id="preview_fake"> <img id="preview" onload="onPreviewLoad(this)" width="360" height="58"/> </div>
							<img id="preview_size_fake"/>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</div>
</div>
<div id="footer">&copy; copyright 2008-2012 Gensee, Inc. 版权所有 <a href="http://www.miibeian.gov.cn/" target="_blank">浙ICP备12001889号-3</a> 浙B2-20120093</div>
<script type="text/javascript">
function onUploadImgChange(sender){
	if( !sender.value.match( /.jpg|.gif|.png/i ) ){
		alert('图片格式无效！');
		return false;
	}
	
	var objPreview = document.getElementById( 'preview' );
	var objPreviewFake = document.getElementById( 'preview_fake' );
	var objPreviewSizeFake = document.getElementById( 'preview_size_fake' );
	
	if( sender.files &&  sender.files[0] ){
		objPreview.style.display = 'block';
		objPreview.style.width = 'auto';
		objPreview.style.height = 'auto';
		
		// Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
		objPreview.src = sender.files[0].getAsDataURL();	
	}else if( objPreviewFake.filters ){ 
		// IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
		//（相同环境有时能显示，有时不显示），因此只能用滤镜来解决
		
		// IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
		sender.select();
		var imgSrc = document.selection.createRange().text;
		
		objPreviewFake.filters.item(
			'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
		objPreviewSizeFake.filters.item(
			'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
		
		autoSizePreview( objPreviewFake, 
			objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight );
		objPreview.style.display = 'none';
	}
	$("#preview_wrapper").css("z-index","1");
}

function onPreviewLoad(sender){
	autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );
}

function autoSizePreview( objPre, originalWidth, originalHeight ){
	var zoomParam = clacImgZoomParam( 359,57, originalWidth, originalHeight );
	objPre.style.width = 359+'px';
	objPre.style.height = 57+'px';
	//objPre.style.marginTop = zoomParam.top + 'px';
	//objPre.style.marginLeft = zoomParam.left + 'px';
}

function clacImgZoomParam( maxWidth, maxHeight, width, height ){
	var param = { width:width, height:height, top:0, left:0 };
	
	if( width>maxWidth || height>maxHeight ){
		rateWidth = width / maxWidth;
		rateHeight = height / maxHeight;
		
		if( rateWidth > rateHeight ){
			param.width =  maxWidth;
			param.height = height / rateWidth;
		}else{
			param.width = width / rateHeight;
			param.height = maxHeight;
		}
	}
	
	param.left = (maxWidth - param.width) / 2;
	param.top = (maxHeight - param.height) / 2;
	
	return param;
}
</script>
</body>
</html>
